<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>lj</title>
    <style type="text/css">
        #lottery{
            width: 100%;
            margin: 15px auto 0;
            background:url('__PUBLIC__/Draw/images/bg.png');
            background-size: 100% 100%;
        }
        #lottery table{
            width:90%;
            height:420px;
        }
        #lottery table tr{
            height:140px;
            width:33.33333%;
        }
        #lottery table td{
            width: 33.333333%;
            height: 140px;
            text-align: center;
            vertical-align: middle;
            background-color: #ccc;
            font-size: 24px;
            color: #333;
        }

        #lottery table td a{
            width: 33.333333%;
            /*height: 140px;*/
            /*line-height: 150px;*/
            display: block;
            text-decoration: none;
        }

        #lottery table td.active{
            color: red;
            background-color: yellow;
        }
        .success{
            width: 94%;
            margin: 20px 10px;
            height:100px;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            border:2px solid #333;
        }
    </style>
</head>
<body>
<div id="lottery">
    <table>
        <tr>
            <td style="background: url('__PUBLIC__/Draw/images/red.png');background-size: 100% 100%" class="lottery-unit lottery-unit-0">1</td>
            <td style="background: url('__PUBLIC__/Draw/images/yellow.png');background-size: 100% 100%" class="lottery-unit lottery-unit-1">2</td>
            <td style="background: url('__PUBLIC__/Draw/images/red.png');background-size: 100% 100%" class="lottery-unit lottery-unit-2">3</td>
        </tr>
        <tr>
            <td style="background: url('__PUBLIC__/Draw/images/yellow.png');background-size: 100% 100%" class="lottery-unit lottery-unit-7">8</td>
            <td id="start"  style="background: url('__PUBLIC__/Draw/images/start.png');background-size: 100% 100%"><a href="#"></a></td>
            <td style="background: url('__PUBLIC__/Draw/images/yellow.png');background-size: 100% 100%" class="lottery-unit lottery-unit-3">4</td>
        </tr>
        <tr>
            <td style="background: url('__PUBLIC__/Draw/images/red.png');background-size: 100% 100%" class="lottery-unit lottery-unit-6">7</td>
            <td style="background: url('__PUBLIC__/Draw/images/yellow.png');background-size: 100% 100%" class="lottery-unit lottery-unit-5">6</td>
            <td style="background: url('__PUBLIC__/Draw/images/red.png');background-size: 100% 100%" class="lottery-unit lottery-unit-4">5</td>
        </tr>
    </table>
</div>
<div class="success"></div>


<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
    var lottery={
        index:0,	//当前转动到哪个位置
        count:7,	//总共有多少个位置
        timer:0,	//setTimeout的ID，用clearTimeout清除
        speed:100,	//初始转动速度
        times:0,	//转动次数
        cycle:80,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize:5,	//中奖位置
        init:function(id){
            if ($("#"+id).find(".lottery-unit").length>0) {
                $lottery = $("#"+id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-"+this.index).addClass("active");
            };
        },
        roll:function(){
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-"+index).removeClass("active");
            index += 1;
            if (index>count-1) {
                index = 0;
            };
            $(lottery).find(".lottery-unit-"+index).addClass("active");
            this.index=index;
            return false;
        },
        stop:function(index){
            this.prize=index;
            return false;
        }
    };

    function roll(){
        lottery.times += 1;
        lottery.roll();
        if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
            clearTimeout(lottery.timer);
            lottery.prize=-1;
            lottery.times=0;
//            SetDrawIndex(6);
           $('.success').html('恭喜你，获得了'+$('.active').index()+'奖');
            click=false;
        }else{
            if (lottery.times<lottery.cycle) {
                lottery.speed -= 10;
            }else if(lottery.times==lottery.cycle) {
//                var index = Math.random()*(lottery.count)|0;
                var index = lottery.prize|0;
                lottery.prize = index;
            }else{
                if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                    lottery.speed += 110;
                }else{
                    lottery.speed += 20;
                }
            }
            if (lottery.speed<40) {
                lottery.speed=40;
            };
            //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
            lottery.timer = setTimeout(roll,lottery.speed);
        }
        return false;
    }

    var click=false;

    window.onload=function(){
        lottery.init('lottery');
        $("#start").click(function(){
            if (click) {
                return false;
            }else{
                    $.post('{:U("Draw/probability")}',{},function(data){
                        alert(data);
                        lottery.speed=50;
                        lottery.prize= data;
                        roll();
                        click=true;
                        return false;
                    })
//                lottery.speed=50;
//                lottery.prize= rand;
//                roll();
//                click=true;
//                return false;
            }
        });
    };
    $(function(){
        var width = $('#lottery').css('width');
        $('#lottery').css('height',width);
        var TableWidth = $('table').css('width');
        $('table').css('height',TableWidth);
        $('tr').css('height',parseInt(TableWidth)/3);
        $('td').css('height',parseInt(TableWidth)/3);
    })
    function SetDrawIndex(index){
        $("#lottery").find(".lottery-unit-"+index).addClass("active");
    }
</script>
</body>
</html>